<template>
	<view class="container bg-gray">
		<cu-custom bgColor="bg-white" :isBack="true">
		  <block slot="content">反馈投诉</block>
		</cu-custom>
		<!-- 姓名和联系方式 -->
		<view class="cu-list bg-white radius margin">
			<view class="cu-form-group solid-bottom">
				<view class="title">姓名</view>
				<input v-model="form.name" placeholder="请输入姓名" />
			</view>
			<view class="cu-form-group no-border">
				<view class="title">联系方式</view>
				<input v-model="form.contact" placeholder="请输入联系方式" />
			</view>
		</view>

		<!-- 意见类型 -->
		<view class="cu-list bg-white radius margin padding">
			<view class="text-bold">我的意见是关于</view>
			<view class="cu-btn-group flex-wrap margin-top-sm">
				<view
					v-for="item in typeList"
					:key="item.type"
					class="cu-btn"
					:class="form.type === item.type ? 'bg-blue light' : 'line-gray'"
					@click="form.type = item.type"
				>
					{{ item.name }}
				</view>
			</view>
		</view>

		<!-- 建议内容 -->
		<view class="cu-list bg-white radius margin padding">
			<view class="text-bold">我的意见/建议是</view>
			<textarea
				v-model="form.content"
				placeholder="请将您的宝贵意见在这里告诉我们吧（详细描述，请填写至少10个字）"
				class="textarea"
			/>
		</view>

		<!-- 提交按钮 -->
		<view class="margin padding">
			<button class="cu-btn block bg-blue margin-top radius" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
				contact: '',
				type: '', // 记录选中的 type 值（例如 1）
				content: ''
			},
			typeList: [
				{ type: 1, name: '功能问题' },
				{ type: 2, name: '平台规则' },
				{ type: 3, name: '运输问题' },
				{ type: 4, name: '客服人员' },
				{ type: 5, name: '投诉建议' }
			]
		}
	},
	methods: {
		submit() {
			if (!this.form.name || !this.form.contact || !this.form.type || this.form.content.length < 10) {
				uni.showToast({ title: '请填写完整信息（建议内容不少于10字）', icon: 'none' });
				return;
			}
			console.log('提交内容：', this.form);
			uni.showToast({ title: '提交成功', icon: 'success' });
			this.form = { name: '', contact: '', type: '', content: '' };
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
}

.cu-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	margin-top: 10rpx;
}

.cu-btn {
	padding: 16rpx 40rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
}

.textarea {
	width: 100%;
	min-height: 200rpx;
	margin-top: 20rpx;
	padding: 20rpx;
	background-color: #f5f5f5;
	border-radius: 10rpx;
	font-size: 28rpx;
}

.no-border {
	border: none !important;
}
</style>
